style: High contrast fixes for buttons

- improves hover style; fixes #5765
- adds missing high contrast borders
- bumps colors for visibility

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2441>

diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index c22bfea8231f97ca18fea454769f09538aad81c1..c42a95543b8349d530dc390f31c69043a54f19fe 100644 (file)
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -3,6 +3,8 @@
 
 @import '_palette.scss';
 
+$is_highcontrast: "false";
+
 $_dark_base_color: darken(desaturate(#241f31, 100%), 2%);
 
 $base_color: if($variant == 'light', #fff, $_dark_base_color);
@@ -33,6 +35,9 @@ $osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
 
 $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
 
+// button
+$button_mix_factor: 5%;
+
 // cards
 $card_bg_color: if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 2%));
 

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index bdb2fb261c89cd3621bd88219da028b4b0273091..8d9a33071b9bab43ed9e77a051bf41af19706e5f 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -145,27 +145,30 @@
 
 @mixin button($t, $tc:$fg_color, $c:$bg_color) {
 
-  $button_bg_color: mix($tc, $c, 5%);
+  $button_bg_color: mix($tc, $c, $button_mix_factor);
   transition-duration: 100ms;
 
   // normal button
   @if $t==normal {
     color: $tc;
     background-color: $button_bg_color;
+    @if $is_highcontrast == "true" {
+      box-shadow: inset 0 0 0 1px $button_inset_color;
+    }
   }
 
   // focused button
   @if $t==focus {
     color: $tc;
     background-color: mix($button_bg_color, $selected_bg_color, 90%);
-    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
+    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
     &:hover {
       background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
     }
     &:active {
       background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
     }
   }
 
@@ -173,18 +176,31 @@
   @else if $t==hover {
     color: $tc;
     background-color: lighten($button_bg_color, 3%);
+
+    @if $is_highcontrast == "true" {
+      box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%);
+      background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%);
+    }
   }
 
   // active button
   @else if $t==active {
     color: $tc;
     background-color:  lighten($button_bg_color, 6%);
+    @if $is_highcontrast == "true" {
+      box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%);
+      background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%);
+    }
   }
 
   // checked button
   @else if $t==checked {
     color: $tc;
     background-color: lighten($button_bg_color, 9%);
+    @if $is_highcontrast == "true" {
+      box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%);
+      background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%);
+    }
     &:hover { background-color: lighten($button_bg_color, 12%);}
     &:active { background-color: lighten($button_bg_color, 15%);}
   }
@@ -193,12 +209,16 @@
   @else if $t==insensitive {
     color: transparentize($tc, 0.5);
     background-color: transparentize($tc, .95);
+    @if $is_highcontrast == "true" {
+      box-shadow: inset 0 0 0 1px transparentize($button_inset_color, 0.5);
+    }
   }
 
   // default/suggested button
   @else if $t==default {
     background-color: $selected_bg_color;
     color: $selected_fg_color;
+    box-shadow: none;
     &:focus {
       box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%);
     }
@@ -221,6 +241,7 @@
   @else if $t==undecorated {
     background-color: transparent;
     background-color: none;
+    box-shadow: none;
     &:insensitive {
       @include button(insensitive);
       background-color: transparent;

diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
index 35e2d851a713265bd3c5fcbd5d6147a49c40769a..0d48644a1e6263a44d88af6593f308b6b9ab1ef6 100644 (file)
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -3,6 +3,8 @@
 
 @import '_palette.scss';
 
+$is_highcontrast: 'true';
+
 $base_color: if($variant == 'light', #fff, #000);
 $bg_color: $base_color;
 $fg_color: if($variant == 'light', transparentize(black, .2), white);
@@ -30,6 +32,10 @@ $osd_outer_borders_color: $osd_bg_color;
 
 $shadow_color: transparent;
 
+// button
+$button_inset_color: transparentize($fg_color, 0.8);
+$button_mix_factor: 10%;
+
 // cards
 $card_bg_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 12%));